<template>
  <div class="panel">
    <header class="header">
      {{title}} <slot name="header"> <i v-if="showAdd" class="el-icon-plus" @click="triggerAdd" title="新增"></i> </slot> 
    </header>

    <section class="main">
      <slot></slot>
    </section>

    <slot name="pagger">
      <el-pagination
        v-if="total > 0"
        layout="prev, pager, next"
        @current-change="pageChange"
        :total="total">
      </el-pagination>
    </slot>

    <slot name="bottom"></slot>
  </div>
</template>

<script>
export default {
  name: "panel",
  props: {
    title: {
      type: String,
      default: "default header"
    },
    total: {
      type: Number,
      default: 0
    },
    showAdd : {
      type : Boolean,
      default : false
    }
  },
  data() {
    return {
    };
  },

  methods: {
    pageChange(page) {
      this.$emit("page", page);
    },
    triggerAdd(){
      this.$emit("add");
    }
  },

  mounted() {}
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
.panel {
  border: 1px solid #ddd;
  border-radius: 3px;

  .header {
    padding: 8px 15px;
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
    line-height: 26px;
    font-size: 16px;
    color: #333;

    i{
      cursor: pointer;
      font-weight: bold;
      float: right;
      line-height: 26px;
    }

    .icon-add{
      float: right;
      background: red;
      width: 18px;
      height: 18px;
    }
  }

  .main {
    min-height: 100px;
    padding: 15px;
    color: #333;
  }

  .el-pagination {
    margin: 15px;
    text-align: center;
  }
  
}
</style>
